/*
  学习目标：useEffect模拟生命周期- 更新时
  语法： 
    1. useEffect(() => {}, []) 挂载后
    2. useEffect(() => {}, [依赖项]) :  挂载更新二合一

*/

import React, { useState, useEffect } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  // 挂载后
  // useEffect(() => {
  //   console.log('执行了  ----->  ');
  //   document.title = count;
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, []);

  // 模拟更新后
  // 💥代表: 挂载、更新二合一, 等同于componentDidUpdate和componentDidMount
  // 类似vue中: watch, 开启了immediately
  useEffect(() => {
    console.log('执行了  ----->  ', count);
    document.title = count;
  }, [count]);

  return (
    <div>
      <h1>{count}</h1>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        点我+1
      </button>
    </div>
  );
}
